<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <ul class="layui-nav layui-layout-left">
        </ul>
        <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
            <li class="layui-nav-item" lay-unselect style="margin-right: 20px;">
                <a href="javascript:;">
                    <cite id="name"></cite>
                </a>
                <dl class="layui-nav-child">

                    <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
                </dl>

            </li>

            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
                <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
            </li>
        </ul>
    </div>
    <div class="layui-header">

        <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">

            <li class="layui-nav-item layui-hide-xs" lay-unselect="" id="btn-box">
                <button class="zh-en active layui-btn layui-btn-primary">中文</button>
                <button class="English layui-btn layui-btn-primary" style="margin: 0;">English</button>
            </li>


            <li class="layui-nav-item" lay-unselect style="margin-right: 20px;">

                <a href="javascript:;">
                    <cite id="username"></cite>
                </a>
                <dl class="layui-nav-child">
                    <dd id="password_btn" style="text-align: center;"><a>修改密码</a></dd>
                    <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
                </dl>

            </li>



        </ul>
    </div>
   
    <script type="text/html" id="change_password">
        <style>
            .alert-box {
                position: relative;
                display: block;
                width: 100%;
                height: auto;
                box-sizing: border-box;
                padding: 20px 0;
            } 
            .alert-box .box-title {
                display: block;
                font-size: 14px;
                color: #1F1F1F;
                font-weight: 500;
                text-align: center;
                margin-bottom: 8px;
            }

            .alert-box .form_body {
                padding: 10px 30px 0;
                margin-bottom: 20px;
            }

            .alert-box .layui-form-label2 {
                width: 80px;
                float: left;
                text-align: right;
                font-size: 12px;
            }

            .alert-box .layui-form-item2 {
                margin: 0;
                margin-bottom: 10px;
                height: 24px;
                line-height: 24px;
            }

            .alert-box .layui-form-item2 input {
                width: 80%;
                flex-grow: 0;
                height: 20px;
                padding: 0 10px;
            }

            .alert-box .layui-form-item2 input:focus {
                outline: none;
            }

            .alert-box .footer {
                display: flex;
                display: -webkit-flex;
                justify-content: center;
                margin: 0;
                padding: 0;

            }

            .alert-box .footer button {
                width: 70px;
                height: 25px;
                line-height: 25px;
                font-size: 12px;
                color: #FFF;
                border: 0;
                text-align: center;
            }

            .alert-box .layui-input-block2 {
                margin-left: 90px;
                min-height: auto;
            }

            .alert-box .layui-input-block2 span {
                padding-left: 10px;
            }

            .alert-box .footer>.btn1 {
                background-color: #FF4C4C;
                margin-right: 41px;
            }

            .alert-box .layui-btn-container>.btn2 {
                background-color: #8A8A8A;
            }

            .alert-box #text {
                resize: none;
            }

            .alert-box .layui-textarea {
                min-height: 74px;
            }

            .alert-box .alert-box-fault-type {
                width: 325px;
                height: 245px;
                padding: 14px 36px 42px 21px;
                font-size: 12px;
                color: #616161;
                box-sizing: border-box;
                margin: 0;
            }

            .alert-box #fault-type-text {
                display: inline-block;
                width: 166px;
                height: 56px;
                resize: none;
            }

            .alert-box .fault-footer {
                margin-top: 10px;
            }
        </style>
        <div class="alert-box">
            <div class="box-title">密码修改</div>
            <form class="layui-form">
                <div class="form_body">
                    <div class="layui-form-item2">
                        <label class="layui-form-label2">原密码:</label>
                        <div class="layui-input-block2">
                            <input type="password" require lay-verify="required|pass" name="oldpassword"
                                autocomplete="off" />
                        </div>
                    </div>
                    <div class="layui-form-item2">
                        <label class="layui-form-label2">新密码设置:</label>
                        <div class="layui-input-block2">
                            <input type="password" require lay-verify="required|pass" name="password"
                                autocomplete="off" />
                        </div>
                    </div>
                    <div class="layui-form-item2">
                        <label class="layui-form-label2">确认新密码:</label>
                        <div class="layui-input-block2">
                            <input type="password" require lay-verify="required|pass" name="passwordrepeat"
                                autocomplete="off" />
                        </div>
                    </div>
                </div>
                <div class="footer layui-btn-container">
                    <button type="button" class="btn1 layui-btn layui-btn-radius layui-btn-primary" lay-submit
                        lay-filter="alertConfirm">确定</button>
                    <button type="button"
                        class="btn2 cancel-btn layui-btn layui-btn-radius layui-btn-primary">取消</button>
                </div>
            </form>
        </div>
    </script>
    <script src="../src/controller/html5.min.js"></script>
    <script src="../src/controller/respond.min.js"></script>
    <script src="../src/js/jquery-1.9.1.min.js"></script>
    <script src="../src/js/jquery-ui.min.js"></script>
    <script src="../src/jquery.qrcode.min.js"></script>
    <script src="../src/jquery-migrate-1.2.1.min.js"></script>
    <script src="../src/jquery.jqprint-0.3.js"></script>
    <script src="../src/js/jquery.i18n.properties.js"></script>
    <script>
        layui.use(['admin', 'form', 'user', 'api', 'layer', 'view', 'laytpl', 'utill','dtree'], function () {
            var $ = layui.$,
                setter = layui.setter,
                admin = layui.admin,
                form = layui.form,
                api = layui.api,
                layer = layui.layer,
                view = layui.view,
                utill = layui.utill,
                laytpl = layui.laytpl
                router = layui.router(),
                dtree = layui.dtree,
                search = router.search;


            document.getElementById('username').innerHTML = layui.sessionData(setter.tableName).userInfo.userName

            $('#password_btn').click(function () {
                layer.open({
                    type: 1,
                    title: false,
                    area: ["368px", "235px"],
                    fixed: true,
                    shadeClose: true,
                    closeBtn: 0,
                    content: $("#change_password").html(),
                    success: function (layeror, index) {
                        form.render();
                        form.verify({
                            pass: [
                                /^[\S]{1,16}$/, '密码最长16位，且不能出现空格'
                            ]
                        })
                        $('.cancel-btn').click(function () {
                            layer.close(index)
                        })
                        form.on('submit(alertConfirm)', function (data) {
                            var field = data.field,
                                password = field.password,
                                oldpassword = field.oldpassword,
                                passwordrepeat = field.passwordrepeat;

                            if (password != passwordrepeat) {
                                layer.msg('两次密码输入不一样，请重新输入');
                                return false;
                            }
                            var opts = {
                                tcHrPwd: password,
                                oldPwd: oldpassword
                            }
                            view.req({
                                url: api.host + api.updatePwd,
                                type: "POST",
                                contentType: "application/json",
                                data: JSON.stringify(opts)
                            }).done(function (res) {
                                if (res.code == "0") {
                                    layer.msg(res.message, {
                                        time: 800
                                    }, function () {
                                        // 修改成功
                                        layer.msg(
                                            '两秒后即将跳转到登陆页...', {
                                            icon: 1,
                                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                        },
                                            function () {
                                                // 退出到登录页
                                                view.exit();
                                            });
                                    });
                                    layer.close(index)
                                }
                            })
                            return false
                        })
                    }
                })
            })

            var dqEnglish = layui.sessionData('English').English
            $('#btn-box').on('click', 'button', function () {
                $(this).addClass("active").siblings().removeClass('active');
            })

            view.req({
                url: api.host + api.getUserMenu,

            }).done(function (res) {
                var getTpl = TPL_layout.innerHTML,
                    view = document.getElementById('view1');
                laytpl(getTpl).render(res, function (html) {

                    view.innerHTML = html;
                    layui.element.render('nav', 'layadmin-system-side-menu');
                });
            })
            form.render();
        });
    </script>
    <style>
        .layui-nav-itemed>.layui-nav-child {
            background-color: rgba(12, 42, 66, 0.1) !important;
        }
    </style>
    <!-- 侧边菜单 -->
    <div class="layui-side layui-side-menu" style="background: #0C2A42	 !important;">
        <div class="layui-side-scroll" id="view1">

            <script type="text/html" id="TPL_layout">
                <div class="layui-logo" style="background-color: rgba(12,42,66,1) !important;">
                    <span>{{ layui.setter.name || 'layuiAdmin' }}</span>
                </div>
                <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu"
                    lay-filter="layadmin-system-side-menu">
                    {{# var path = layui.router().path ,pathURL = layui.admin.correctRouter(path.join('/')) ,dataName = layui.setter.response.dataName; layui.each(d[dataName], function(index, item){ var hasChildren = typeof item.child === 'object' && item.child.length > 0
                    ,classSelected = function(){ var match = path[0] == item.name || (index == 0 && !path[0]) || (item.tcUrl && pathURL == layui.admin.correctRouter(item.tcUrl)) || item.spread; if(match){ return hasChildren ? 'layui-nav-itemed' : 'layui-this';
                    } return ''; } ,url = (item.tcUrl && typeof item.tcUrl === 'string') ? item.tcUrl : item.name; }}
                    <li data-name="{{ item.name || '' }}" data-jump="{{ item.tcUrl || '' }}"
                        class="layui-nav-item {{ classSelected() }}">
                        <a href="javascript:;" {{ hasChildren ? '' : 'lay-href="'+ url + '"' }}
                            lay-tips="{{ item.tcName }}" lay-direction="2">
                            <i class="layui-icon {{ item.tcIcon }}"></i>
                            <cite>{{ item.tcName }}</cite>
                        </a>
                        {{# if(hasChildren){ }}
                        <dl class="layui-nav-child">
                            {{# layui.each(item.child, function(index2, item2){ var hasChildren2 = typeof item2.child == 'object' && item2.child.length > 0 ,classSelected2 = function(){ var match = (path[0] == item.name && path[1] == item2.name) || (item2.tcUrl && pathURL == layui.admin.correctRouter(item2.tcUrl))
                            || item2.spread; if(match){ return hasChildren2 ? 'layui-nav-itemed' : 'layui-this'; } return ''; } ,url2 = (item2.tcUrl && typeof item2.tcUrl === 'string') ? item2.tcUrl : [item.name, item2.name, ''].join('/'); }}
                            <dd data-name="{{ item2.name || '' }}" data-jump="{{ item2.tcUrl || '' }}"
                                {{ classSelected2() ? ( 'class="'+ classSelected2() + '"') : '' }}>
                                <a href="javascript:;"
                                    {{ hasChildren2 ? '' : 'lay-href="'+ url2 + '"' }}>{{ item2.tcName }}</a>
                                {{# if(hasChildren2){ }}
                                <dl class="layui-nav-child">
                                    {{# layui.each(item2.child, function(index3, item3){ var match = (path[0] == item.name && path[1] == item2.name && path[2] == item3.name) || (item3.tcUrl && pathURL == layui.admin.correctRouter(item3.tcUrl)) ,url3 = (item3.tcUrl && typeof item3.tcUrl === 'string')
                                    ? item3.tcUrl : [item.name, item2.name, item3.name].join('/') }}
                                    <dd data-name="{{ item3.name || '' }}" data-jump="{{ item3.tcUrl || '' }}"
                                        {{ match ? 'class="layui-this"' : '' }}>
                                        <a href="javascript:;" lay-href="{{ url3 }}"
                                            {{ item3.iframe ? 'lay-iframe="true"' : '' }}>{{ item3.tcName }}</a>
                                    </dd>
                                    {{# }); }}
                                </dl>
                                {{# } }}
                            </dd>
                            {{# }); }}
                        </dl>
                        {{# } }}
                    </li>
                    {{# }); }}
                </ul>
            </script>
        </div>
    </div>


    <!-- 页面标签 -->
    <script type="text/html" template lay-done="layui.element.render('nav', 'layadmin-pagetabs-nav')">
        {{# if(layui.setter.pageTabs){ }}
        <div class="layadmin-pagetabs" id="LAY_app_tabs">
            <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
            <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
            <div class="layui-icon layadmin-tabs-control layui-icon-down">
                <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;"></a>
                        <dl class="layui-nav-child layui-anim-fadein">
                            <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                            <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                            <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
                <ul class="layui-tab-title" id="LAY_app_tabsheader">
                    <li lay-id="/"><i class="layui-icon layui-icon-home"></i></li>
                </ul>
            </div>
        </div>
        {{# } }}
    </script>
    <!-- 主体内容 -->
    <div class="layui-body" id="LAY_app_body">
        <div class="layadmin-tabsbody-item layui-show"></div>
    </div>
    <!-- 辅助元素，一般用于移动设备下遮罩 -->
    <div class="layadmin-body-shade" layadmin-event="shade"></div>

</div>
<script>
    let lang = 'zh';

    function toggleProperties(type) {
        $.i18n.properties({ //加载资浏览器语言对应的资源文件
            name: 'strings', //资源文件名称
            path: '../../src/language/', //资源文件路径
            language: type,
            cache: false,
            mode: 'map', //用Map的方式使用资源文件中的值
            callback: function () { //加载成功后设置显示内容
                for (let i in $.i18n.map) {
                    $('[data-lang="' + i + '"]').text($.i18n.map[i]);
                }
            }
        });
    }
    

    $('.English').on('click', function () {
        layui.sessionData('English', {
            key: 'English',
            value: true
        });

        sessionStorage.setItem('lang', 'en');

        toggleProperties('en'); 
        var labelinp = $(".labelinp");
        var en_ch =  "data_en"  
        labelinp.each(function (i) {
            $(this).html($(this).attr(en_ch));
        });
    });

    $('.zh-en').on('click', function () {
        layui.sessionData('English', {
            key: 'English',
            value: false
        })
        sessionStorage.setItem('lang', 'zh'); 
        toggleProperties('zh');
        var labelinp = $(".labelinp");
        var en_ch =  "data_cn"  
        labelinp.each(function (i) {
            $(this).html($(this).attr(en_ch));
        });
    });
</script>